<template>
	<view class="content">
		<view class="uni-margin-wrap">
			<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration">
				<swiper-item v-for="(item, index) in banners" :key="index">
					<view class="swiper-item">
						<image :src="item" class="banner" mode=""></image>
					</view>
				</swiper-item>
			</swiper>		
		</view>
		<!-- 寄件按钮 -->
		<view class="block-view" style="margin-top: 40px;"> <!-- 增加间距 -->
			<view class="block-view-child">
				<view class="box bg-white" @click="navigateToExpressForm">
					<image class="icon" src="../../static/banner/send.png" mode=""></image>
					<view class="box-txt">
						<text class="box-txt-up">寄快递</text>
						<text class="box-txt-down">一小时取文件</text>
					</view>
				</view>
				<view class="box bg-white" @click="navigateToExpressList">
					<image class="icon" src="../../static/banner/query.png" mode=""></image>
					<view class="box-txt">
						<text class="box-txt-up">查物流</text>
						<text class="box-txt-down">大件/零担/整车</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 小图标 -->
		<view class="block-view" style="margin-top: 40px;"> <!-- 增加间距 -->
			<view class="block-view-child box-small-section">
				<view class="box-small-view" v-for="(item, index) in smallIcons" :key="index">
					<uni-icons type="contact" size="30"></uni-icons>
					<text>同城急送</text>
				</view>
			</view>
		</view>
		<!-- 按钮 -->
		<view class="btn-view">
			<button class="btn" @click="onButtonClick"><uni-icons type="contact" size="30"></uni-icons></button>
			<button class="btn" @click="onButtonClick"><uni-icons type="contact" size="30"></uni-icons></button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				banners: [
					'../../static/banner/banner1.png',
					'../../static/banner/banner2.png',
					'../../static/banner/banner3.png',
					'../../static/banner/banner4.png',
					'../../static/banner/banner5.png',
					'../../static/banner/banner6.png'
				],
				smallIcons: Array(10).fill(null), // 示例数据
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500
			}
		},
		onLoad() {
			const account = uni.getStorageSync('account')
			if (account === '') {
				this.logout()
			}
		},
		onShow() {
			const account = uni.getStorageSync('account')
			if (account === '') {
				this.logout()
			}
		},
		methods: {
			navigateToExpressForm() {
				uni.navigateTo({ url: '../expressForm/expressForm' });
			},
			navigateToExpressList() {
				uni.switchTab({ url: '/pages/express/express' });
			},
			onButtonClick() {
				// 处理按钮点击
			},
			logout() {
				uni.navigateTo({
					url: '/pages/login/login'
				})
			}
		}
	}
</script>

<style>
	.content {
		background-color: #f2f2f2;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: flex-start; /* 从顶部开始 */
		height: calc(100vh - 95px);
		box-sizing: border-box;
	}

	.uni-margin-wrap {
		width: 100%;
	}

	.swiper {
		height: 200px; /* 调整高度 */
	}

	.swiper-item {
		height: 100%; /* 使 swiper-item 高度充满 swiper */
		text-align: center;
	}

	.banner {
		width: 100%;
		height: 100%; /* 使图片高度充满 swiper-item */
		object-fit: cover; /* 保持比例 */
	}

	.bg-white {
		background-color: white;		
	}

	.block-view {
		width: 95%;
		margin: 5px 0; /* 减少上下间距 */
	}

	.block-view-child {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}

	.box {
		display: flex;
		flex-direction: row;
		align-items: center;
		cursor: pointer;
		width: calc(50% - 5px);
		height: 80px; /* 固定高度 */
		border-radius: 10px;
	}

	.box-txt {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.box-txt-up {
		font-size: 20px;
		padding-bottom: 5px;
	}

	.box-txt-down {
		color: gray;
		font-size: 14px;
	}

	.icon {
		width: 60px;
		height: 60px;
	}

	.box-small-view {
		display: flex;
		flex-direction: column;
		width: 19%;
		align-items: center;
		justify-content: center;
		margin-top: 5px; /* 减少间距 */
	}

	.box-small-section {
		flex-wrap: wrap;
		justify-content: space-between; /* 添加间距 */
	}

	.btn-view {
		display: flex;
		flex-direction: row;
		width: 100%;
		margin: 10px 0; /* 调整间距 */
	}

	.btn {
		width: 45%;
	}
</style>
